<template>
  <view class="page">
    <Header :title="'我的'"></Header>
    <view class="main_container">
      <view class="main_content">
        <view class="content">
          <view class="left">
            <view class="top">
              <view class="title">
                <view>当前已获金币 </view>
                <text>
                  {{ Number(userInfo.goldNum) + Number(userInfo.chargeGold) }}枚
                </text>
              </view>
            </view>
            <view class="bottom">
              <view class="tips">
                <view class="tips_left">
                  本月累计登录<text style="color: #fb0d0d">{{ monthDays }}</text
                  >天
                </view>
                <view class="tips_right">
                  每日登录平台完成签到，获得基础5金币奖励
                </view>
              </view>
              <view class="calendar">
                <view class="calendar_list">
                  <view
                    class="calendar_item"
                    v-for="(item, index) in days"
                    :key="index"
                    :class="{
                      complete: item.dk,
                      incomplete: !item.dk,
                    }"
                    @click="handleDk(item)"
                  >
                    <template v-if="!item.dk && item.today">
                      <view class="calendar_image">
                        <image
                          src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/user/clockIn.png"
                          mode="heightFix"
                        />
                      </view>
                      <view class="calendar_text"> D{{ item.days }}天 </view>
                    </template>
                    <template v-else-if="item.dk && item.today">
                      <view class="calendar_image">
                        <image
                          src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/user/clockIn.png"
                          mode="heightFix"
                        />
                      </view>
                      <view class="calendar_text"> D{{ item.days }}天 </view>
                    </template>
                    <template v-else-if="item.dk && !item.today">
                      <view class="calendar_image">
                        <image
                          src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/user/gold.png"
                          mode="heightFix"
                        />
                      </view>
                      <view class="calendar_text"> D{{ item.days }}天 </view>
                    </template>
                  </view>
                </view>
              </view>
              <view class="nav">
                <view
                  class="nav_item"
                  @click="switchPage('/pages/user/todayReview')"
                >
                  <view class="nav_text"> 今日复习 </view>
                  <view class="nav_icon">
                    <u-icon name="arrow-right" color="#000" size="36"></u-icon>
                  </view>
                </view>
                <view
                  class="nav_item"
                  @click="switchPage('/pages/user/learningRecords')"
                >
                  <view class="nav_text"> 学习记录 </view>
                  <view class="nav_icon">
                    <u-icon name="arrow-right" color="#000" size="36"></u-icon>
                  </view>
                </view>
                <view class="nav_item">
                  <view class="nav_text"> 词汇魔法师 </view>
                </view>
              </view>
            </view>
          </view>
          <view class="right">
            <view class="top">
              <view class="tabs1">
                <view
                  class="tabs1_item"
                  v-for="(item, index) in typeList1"
                  :key="index"
                  :class="{ active: currentIndex1 === index }"
                  @click="handleChangeType1(index)"
                >
                  <text>{{ item.name }}</text>
                </view>
              </view>
            </view>
            <view class="bottom">
              <view class="subtitle">
                <view class="subtitle_text"> 我的排名 </view>
                <view class="tabs2">
                  <view
                    class="tabs2_item"
                    v-for="(item, index) in typeList2"
                    :key="index"
                    :class="{ active: currentIndex2 === index }"
                    @click="handleChangeType2(index)"
                  >
                    <text>{{ item.name }}</text>
                  </view>
                </view>
              </view>
              <view class="info">
                <view class="info_content">
                  <view class="info_avatar">
                    <image :src="myRank.headImg" mode="scaleToFill" />
                  </view>
                  <view class="info_detail">
                    <view class="info_name">{{ myRank.nickName }}</view>
                    <view class="info_text"
                      >坚持打卡第{{ myRank.dkDays }}天，学习单词<text
                        style="color: #d38e12"
                        >{{ myRank.wordCount }}</text
                      >个</view
                    >
                  </view>
                  <view class="info_tips">
                    <text>{{ myRank.rank > 10 ? "未上榜" : myRank.rank }}</text>
                  </view>
                </view>
              </view>
              <view class="list">
                <view class="list_content">
                  <view
                    class="item"
                    v-for="(item, index) in rankList"
                    :key="index"
                  >
                    <view class="item_num"> {{ index + 1 }} </view>
                    <view class="item_info">
                      <view class="item_avatar">
                        <image :src="item.headImg" mode="scaleToFill" />
                      </view>
                      <view class="info_detail">
                        <view class="info_name">{{ item.nickName }}</view>
                        <view class="info_text"
                          >坚持打卡第{{ item.dkDays }}天，学习单词{{
                            item.wordCount
                          }}个</view
                        >
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="bg">
            <image src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/user/bg.png" mode="scaleToFill" />
          </view>
        </view>
      </view>
    </view>
    <u-popup
      class="custom-popup"
      v-model="show"
      :zoom="false"
      mode="center"
      width="794rpx"
      :mask-custom-style="{
        background: 'rgba(0, 0, 0, 0.5)',
      }"
    >
      <view class="mask">
        <view class="mask_title">
          <text>恭喜获得</text>
        </view>
        <view class="mask_text">
          <image src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/user/gold2.png" mode="scaleToFill" />
          <text>{{ gold }}枚</text>
        </view>
        <view class="mask_tips"> 金币 </view>
        <view class="mask_btn" @click="show = false">
          <text>确定</text>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { getDkDays, dk, getRankList } from "@/api/common";
import { getStore } from "@/libs/storage";
export default {
  components: {},
  data() {
    return {
      userInfo: {},
      days: [],
      monthDays: 0,
      typeList1: [
        {
          name: "今日",
          type: "1",
        },
        {
          name: "本周",
          type: "2",
        },
        {
          name: "本月",
          type: "3",
        },
      ],
      currentIndex1: 0,
      typeList2: [
        {
          name: "全省排名",
          type: "1",
        },
        {
          name: "全市排名",
          type: "2",
        },
      ],
      currentIndex2: 0,
      rankList: [],
      myRank: {},
      gold: 0,
      show: false,
    };
  },
  onLoad() {
    this.userInfo = getStore({
      name: "userInfo",
    });
    this.getDkDays();
    this.getRankList();
  },
  methods: {
    getDkDays() {
      getDkDays().then((res) => {
        this.days = res.data.days.filter(
          (item) => item.dk === true || item.today === true
        );
        this.monthDays = res.data.monthDays;
      });
    },
    getRankList() {
      getRankList(
        this.typeList1[this.currentIndex1].type,
        this.typeList2[this.currentIndex2].type
      ).then((res) => {
        this.rankList = res.data.list;
        this.myRank = res.data.myRank;
      });
    },
    handleDk(item) {
      if (item.today && !item.dk) {
        dk().then((res) => {
          this.gold = res.data;
          this.show = true;
          this.getDkDays();
        });
      }
    },
    handleChangeType1(index) {
      if (this.currentIndex1 == index) return;
      this.currentIndex1 = index;
      this.getRankList();
    },
    handleChangeType2(index) {
      if (this.currentIndex2 == index) return;
      this.currentIndex2 = index;
      this.getRankList();
    },
    switchPage(url) {
      uni.navigateTo({
        url: url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./user.scss";
</style>
